<template>
    <div>
        <search
            class="searchBar"
            v-model="searchContent"
            auto-scroll-to-top="auto-scroll-to-top"
            ref="search"
            @on-submit="toSearch"
            placeholder="输入姓名，搜索所在团队"></search>
        <div class="content MeiJing-index" ref="list">
            <card
                v-for="(item, index) in this.list"
                :key="item.id"
                :id="item.id"
                :bg="item.img"
                :title="item.date + ' ' + item.title"
                type="default"></card>
            <!-- <card bg="src/assets/test.png" title="test" date="2018-02-21"
            type="waterfall"></card> -->
        </div>
        <get-more @click.native="getList()" :isOver="this.isOver"></get-more>
    </div>
</template>

<script>
    'use strict';
    import {Search, Loading, AlertModule, TransferDomDirective as TransferDom} from 'vux'
    import {Util} from '@/js/Util'
    import {Config} from '@/js/Config'
    import Card from '@/components/Card'
    import GetMore from '@/components/GetMore'

    export default {
        name: 'MeiJing_Index',
        directives: {
            TransferDom
        },
        components: {
            Search,
            Card,
            GetMore
        },
        data() {
            return {searchContent: '', list: [], index: 1, isOver: false}
        },
        mounted() {
            // let _self = this;
            this.setTitle();
            // 微信登录
            this.loginWechat(Util.getUrlParam('code'));
            // 获取列表
            this.getList();
            // 滚动条滚动时触发
            /* window.onscroll = function(){
                let toTop = document.documentElement.scrollTop || document.body.scrollTop,
                    listHeight = _self.$refs.list.getBoundingClientRect().height;
                if(!_self.isOver && listHeight - 600 <= toTop) {
                    _self.isOver = true;
                    _self.getList();
                }
            } */
        },
        methods: {
            setTitle() {
                document.title = '美景随拍';
            },
            // 授权登录
            loginWechat(code) {
                // 判断是否有账号信息
                if (!sessionStorage.getItem('MeiJingKu_openid')) {
                    if (!code) {
                        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Config._appid + '&r' +
                                'edirect_uri=' + encodeURIComponent(location.href) + '&response_type=code&scope' +
                                '=snsapi_userinfo&state=1#wechat_redirect';
                    }
                }else {
                    return false;
                }
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                // 测试接口
                // this.$http.post('user/LoginByOpenid/v1?openid=1').then(response => {
                this.$http.post('user/LoginByCode/v1?code=' + code).then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        if (!result.code) {
                            sessionStorage.setItem('MeiJingKu_openid', result.data.openid);
                        } else {
                            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                                            Config._appid + '&redirect_uri=' + encodeURIComponent(location.href) + '&respon' +
                                            'se_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
                        }
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            // 获取列表内容
            getList(key) {
                if (this.isOver) {
                    return false;
                }
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                key == null
                    ? key = ''
                    : key;
                this
                    .$http
                    .get(
                        'team/TeamList/v1?condition=' + key + '&index=' + this.index + '&size=' +
                        Config._pageSize
                    )
                    .then(response => {
                        this.$vux.loading.hide();
                        this.index++;
                        let result = response.data;
                        this.isOver = false;
                        for (let i in result.data) {
                            let item = {
                                id: result
                                    .data[i]
                                    .id,
                                img: result
                                    .data[i]
                                    .picture,
                                title: result
                                    .data[i]
                                    .name,
                                date: result
                                    .data[i]
                                    .date
                            };
                            this
                                .list
                                .push(item);
                        }
                        if (result.data.length < Config._pageSize) {
                            this.isOver = true;
                        }
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            // 搜索栏表单提交
            toSearch() {
                this
                    .$refs
                    .search
                    .setBlur();
                this.isOver = false;
                this.index = 1;
                this.list = [];
                this.getList(this.searchContent);
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
    .searchBar {
        position: fixed !important;
        z-index: 990 !important;
        left: 0;
        top: 0;
    }
    .MeiJing-index {
        padding-top: 4rem;
    }
</style>